<template>
  <div class="book-info">
    <div class="thumb">
      <img class="bg" mode="aspectFill" :src="book.image" alt="">
      <img class="image" mode="aspectFit" :src="book.image" alt="">
      <div class="info">
        <p class="title">{{book.title}}</p>
        <p class="author">{{book.author}}</p>
      </div>
    </div>

    <div class="book-detail">
      <div class="owner flex-row">
        <div class="left">
          <img class="image" :src="uploaderInfo.avatarUrl" mode="aspectFill" width="15" height="15" alt="">
          <span>{{uploaderInfo.nickName}}</span>
        </div>
        <div class="right text-primary">
          <span class="rate text-common">{{book.rating}}</span>
          <rate :value="book.rating" />
        </div>
      </div>

      <div class="sail-info flex-row">
        <span class="publisher">{{book.publisher}}</span>
        <span class="price">{{book.price}}</span>
      </div>

      <div class="tags">
        <div class="badge text-primary" v-for="tag in book.tags" :key="tag">{{tag}}</div>
      </div>

      <div class="summary">
        <p :key="index" v-for="(sum, index) in book.summary">{{sum}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Rate from '@/components/rate.vue'

// const db = wx.cloud.database()
export default {
  name: 'BookInfo',
  data () {
    return {
      uploaderInfo: {}
    }
  },
  props: {
    book: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    _getUploaderInfo () {
      wx.cloud.callFunction({
        name: 'userInfo',
        data: {
          _openid: this.book.userInfo.openId
        }
      })
        .then(res => {
          this.uploaderInfo = res.result.data[0]
        })
    }
  },
  mounted () {
    this._getUploaderInfo()
  },
  components: {
    Rate
  }
}
</script>

<style lang="stylus" scoped>
  .book-info
    .thumb
      position relative
      top -5px
      width 750rpx
      height 500rpx
      .bg
        width 100%
        // filter blur(5px)
        filter blur(8px)
        opacity 0.7
      .image
        position absolute 
        top 30rpx
        right 0
        left 0
        height 300rpx
        margin 0 auto 
      .info
        position absolute 
        left 0
        right 0
        top 340rpx
        text-align center
        color #ffffff
        .title
          line-height 30px
          font-size 20px
        .author
          padding 0 10px
          font-size 14px
    .book-detail
      padding 7px 10px 0
      font-size 13px
      .owner
        .left
          .image
            width 18px
            height 18px
            margin-right 5px
            border-radius 50%
            vertical-align top
        .right
          .rate
            padding-right 5px
      .sail-info
        line-height 32px
      .tags
        .badge
          display inline-block
          margin 5px
          padding 2px 5px
          border-radius 5px
          border 1px solid #ea5a49
      .summary
        margin-top 10px
        line-height 20px
        p
          text-indent 2em
          font-size 14px
</style>
